<ng-container *ngIf="selectedVulnerability$ | async as selectedVulnerability">
  <div class="h-50">
    <div class="d-flex align-items-center justify-content-between">
      <h2 class="m-0">Packages</h2>
      <button (click)="legend = !legend" color="primary" mat-flat-button>
        {{ 'network.legend.TITLE' | translate }}
      </button>
    </div>
    <hr class="fancy mt-1 mb-4 mx-0" />
    <div style="max-height: calc(100% - 74px); overflow: auto" tabindex="0">
      <div *ngFor="let item of selectedVulnerability.packages | keyvalue">
        <label class="mt-sm mb0 text-info auto-hide">{{ item.key }}</label>
        <table
          class="table-striped fixed_header"
          [id]="item.key + 'package-versions'"
          style="width: 100%">
          <thead class="critical-row">
            <tr class="summary-title">
              <th>
                <em class="fa fa-bug text-warning mh-sm"></em>
                {{ 'scan.report.data.IMPACTED' | translate }}
              </th>
              <th>
                <em class="fa fa-lightbulb-o text-primary mh-sm"></em>
                {{ 'scan.report.data.FIXED' | translate }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr *ngFor="let package of $any(item).value">
              <td>
                {{ package.package_version }}
              </td>
              <td>
                {{ package.fixed_version }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <div class="h-50">
    <h2 class="m-0" style="padding-top: 25px">
      {{ 'cis.report.gridHeader.IMPACT' | translate }}
    </h2>
    <hr class="fancy mt-1 mb-4 mx-0" />
    <div style="max-height: calc(100% - 99px); overflow: auto">
      <ng-container *ngIf="selectedVulnerability.nodes.length > 0">
        <h3>{{ 'cis.report.data.NODES' | translate }}</h3>
        <ng-container
          *ngFor="let node of selectedVulnerability.nodes"
          class="d-block">
          <ng-template
            *ngTemplateOutlet="
              impactTemplateButton;
              context: { content: node, type: 'node' }
            "></ng-template>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="selectedVulnerability.images.length > 0">
        <h3>{{ 'cis.report.data.IMAGES' | translate }}</h3>
        <ng-container
          *ngFor="let image of selectedVulnerability.images"
          class="d-block">
          <ng-template
            *ngTemplateOutlet="
              impactTemplateSpan;
              context: { content: image, type: 'image' }
            "></ng-template>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="selectedVulnerability.workloads.length > 0">
        <h3>{{ 'cis.report.data.CONTAINERS' | translate }}</h3>
        <ng-container
          *ngFor="let workload of selectedVulnerability.workloads"
          class="d-block">
          <ng-template
            *ngTemplateOutlet="
              impactTemplateButton;
              context: { content: workload, type: 'workload' }
            "></ng-template>
        </ng-container>
      </ng-container>
      <ng-container *ngIf="selectedVulnerability.platforms.length > 0">
        <h3>{{ 'scan.report.data.PLATFORMS' | translate }}</h3>
        <ng-container
          *ngFor="let platform of selectedVulnerability.platforms"
          class="d-block">
          <ng-template
            *ngTemplateOutlet="
              impactTemplateSpan;
              context: { content: platform, type: 'platform' }
            "></ng-template>
        </ng-container>
      </ng-container>
    </div>
  </div>
</ng-container>

<ng-template #impactTemplateButton let-content="content" let-type="type">
  <ng-container *ngIf="content.policy_mode; else notBeingUsedButton">
    <ng-container [ngSwitch]="content.policy_mode.toLowerCase()">
      <button
        (click)="openBrief(type, content)"
        *ngSwitchCase="'discover'"
        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
        <ng-template
          *ngTemplateOutlet="
            iconTemplate;
            context: { type: type }
          "></ng-template>
        {{ content.display_name }}
      </button>
      <button
        (click)="openBrief(type, content)"
        *ngSwitchDefault
        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
        <ng-template
          *ngTemplateOutlet="
            iconTemplate;
            context: { type: type }
          "></ng-template>
        {{ content.display_name }}
      </button>
    </ng-container>
  </ng-container>
  <ng-template #notBeingUsedButton>
    <button
      (click)="openBrief(type, content)"
      class="border-0 badge text-white ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center"
      style="background-color: black">
      <ng-template
        *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
      {{ content.display_name }}
    </button>
  </ng-template>
</ng-template>

<ng-template #impactTemplateSpan let-content="content" let-type="type">
  <ng-container *ngIf="content.policy_mode; else notBeingUsedSpan">
    <ng-container [ngSwitch]="content.policy_mode.toLowerCase()">
      <span
        *ngSwitchCase="'discover'"
        class="border-0 badge badge-danger ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
        <ng-template
          *ngTemplateOutlet="
            iconTemplate;
            context: { type: type }
          "></ng-template>
        {{ content.display_name }}</span
      >
      <span
        *ngSwitchDefault
        class="border-0 badge badge-success ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center">
        <ng-template
          *ngTemplateOutlet="
            iconTemplate;
            context: { type: type }
          "></ng-template>
        {{ content.display_name }}</span
      >
    </ng-container>
  </ng-container>
  <ng-template #notBeingUsedSpan>
    <span
      class="text-white border-0 badge ml-0 mr-2 mb-2 d-inline-flex justify-content-center align-items-center"
      style="background-color: black">
      <ng-template
        *ngTemplateOutlet="iconTemplate; context: { type: type }"></ng-template>
      {{ content.display_name }}</span
    >
  </ng-template>
</ng-template>

<ng-template #iconTemplate let-type="type">
  <ng-container [ngSwitch]="type">
    <i *ngSwitchCase="'image'" class="eos-icons mr-2" style="font-size: 15px">
      system_image
    </i>
    <i
      *ngSwitchCase="'workload'"
      class="eos-icons mr-2"
      style="font-size: 15px">
      check_box_blank
    </i>
    <i *ngSwitchCase="'node'" class="eos-icons mr-2" style="font-size: 15px">
      storage
    </i>
    <i
      *ngSwitchCase="'platform'"
      class="eos-icons mr-2"
      style="font-size: 15px">
      apartment
    </i>
  </ng-container>
</ng-template>

<div
  *ngIf="legend"
  class="p-2 d-flex flex-column mat-elevation-z8"
  style="
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 1000;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.35);
  ">
  <span
    class="m-0 d-inline-flex justify-content-center align-items-center badge text-white"
    style="background-color: black"
    ><i class="eos-icons mr-2" style="font-size: 15px"> storage </i
    >{{ 'scan.IMAGE_NOT_USED' | translate }}</span
  >
  <span
    class="mx-0 my-2 d-inline-flex justify-content-center align-items-center badge badge-danger"
    ><i class="eos-icons mr-2" style="font-size: 15px"> system_image </i
    >{{ 'scan.UNPROTECTED_NODE' | translate }}</span
  >
  <span
    class="m-0 d-inline-flex justify-content-center align-items-center badge badge-primary"
    ><i class="eos-icons mr-2" style="font-size: 15px"> check_box_blank </i
    >{{ 'scan.PROTECTED_CONTAINER' | translate }}</span
  >
</div>
